<template>
  <div class="simple" simple>
    <div class="breadcrumb-container">
      <a-breadcrumb>
        <a-breadcrumb-item>一级</a-breadcrumb-item>
        <a-breadcrumb-item>二级</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="filter">
      <div class="l">
        <span>状态：</span>
        <a-select v-model="search.type" placeholder="请选择类型" class="filter-select">
          <a-select-option :value="1">全部</a-select-option>
          <a-select-option :value="2">未完成</a-select-option>
          <a-select-option :value="3">已完成</a-select-option>
        </a-select>
        <a-input placeholder="关键字搜索" v-model="search.keywords" @pressEnter="statusChange" class="filter-input">
          <a-icon type="search" slot="suffix" style="cursor: pointer;" @click="statusChange" />
        </a-input>
      </div>
      <div class="r">
        <a-button type="primary" @click="statusChange">查询</a-button>
        <a-button type="primary" @click="testError">错误演示</a-button>
        <a-button type="primary" @click="testSuccess">成功演示</a-button>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="main-body">
      <a-table :columns="columns" :pagination="false" :dataSource="data" rowKey="id" tableLayout="fixed" :scroll="{ x: 500, y: tableHeight }" :loading="loading">
        <template slot="status" slot-scope="text, record">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span v-html="record.statusStr"></span>
            </template>
            <span>已处理</span>
          </a-tooltip>
        </template>
        <span slot="payStatus" slot-scope="text, record">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span v-html="record.payInfo"></span>
            </template>
            {{ record.payStatus }}
          </a-tooltip>
        </span>
        <template slot="action" slot-scope="row">
          <a @click="showDetail">详情</a>
          <a>编辑</a>
        </template>
      </a-table>
    </div>
    <div class="paging-container">
      <a-pagination :current="1" showQuickJumper :showTotal="(total) => `共 ${total} 条`" style="margin: 10px 0;" :total="233" :pageSize="20" showLessItems />
    </div>
  </div>
</template>

<script>
import { simple } from './mock'
export default {
  name: 'simple',
  data() {
    return {
      data: simple.data,
      columns: simple.columns,
      loading: false,
      search: {
        keywords: '',
        type: 1
      }
    }
  },
  created() {
    const { keywords, type } = this.$route
    if (keywords) {
      this.search.keywords = keywords
    }
    if (type) {
      this.search.type = type
    }
    this.statusChange()
  },
  methods: {
    testError() {
      this.$messageSend.error('请求失败')
    },
    testSuccess() {
      this.$messageSend.success('请求成功')
    },
    showDetail() {
      this.$router.push({
        path: '/example/detail'
      })
    },
    statusChange() {
      const { keywords, type } = this.search
      const { path } = this.$route
      this.$router.replace({
        path,
        query: {
          keywords,
          type
        }
      })
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.simple[simple] {
}
</style>
